<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" type="image/x-icon"
	href="${ctxPath}/static/images/lukk.ico" media="screen" />
<link rel="icon" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />
<link rel="bookmark" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />
<title>管理页面</title>
</head>
<body class="sticky-header"
	onload="indexmenu('${oneMenu}','${twoMenu}');">
	<%@ include file="../index/index.jsp"%>
	<section>
		<div class="main-content" style="overflow-y: auto">
			<!-- 地址栏-->
			<div class="page-heading">
				<h3>鹿客帮</h3>
				<ul class="breadcrumb">
					<li><a>管理权限 </a></li>
					<li class="active">分配省份</li>
				</ul>
			</div>

			<div class="panel-body" style="padding-bottom: 0px;">
				<div class="row">
					<div class="col-sm-2">
						<div class="panel-body" style="padding-bottom: 0px;">
							<div class="panel-heading">未分配的省份信息：</div>
							<ul class="list-group" id="unallocatedProvinceList">
							</ul>
						</div>
					</div>
					<div class="col-sm-10">
						<div class="panel-body" style="padding-bottom: 0px;">
							<div class="panel-heading">查询已经分配的省份：</div>
							<div class="panel panel-default">
								<div class="panel-body">
									<form id="formSearch" class="form-horizontal">
										<div class="form-group" style="margin-top: 15px">
											<label class="control-label col-sm-1"
												for="txt_search_provinceName">省份名称</label>
											<div class="col-sm-2">
												<input type="text" class="form-control"
													id="txt_search_provinceName"
													onkeyup="this.value=this.value.replace(/[, ]/g,'')">
											</div>
											<label class="control-label col-sm-1"
												for="txt_result_query">分配结果</label>
											<div class="col-sm-3">
												<input type="text" class="form-control" readonly="readonly"
													id="txt_result_query">
											</div>
											<div class="col-sm-2" style="text-align: left;">
												<button type="button" style="margin-left: 50px"
													id="btn_query" class="btn btn-primary">查询</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
						<table id="tb_internalWorker"></table>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- 分配省份模态框 -->
	<div class="modal fade" style="top: 200px;" id="allocateProvincesModal"
		tabindex="-1" role="dialog"
		aria-labelledby="allocateProvincesModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="allocateProvincesModalLabel">为员工安排省份</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="modifyPotentialWorkerForm"
						role="form">
						<input type="hidden" name="id" id="txt_workerID">
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">员工标识</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="txt_workerCode"
									placeholder="员工标识" readonly="readonly">
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">省份安排</label>
							<div class="col-sm-10">
								<select id="allocateProvincesSelect" name=""
									class="selectpicker show-tick form-control" multiple
									data-live-search="false">

								</select>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" onclick="allocateProvincesModalSubmit()"
						class="btn btn-primary">提交更改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>


<!-- tables插件的引用 -->
<script src="${ctxPath}/static/js/bootstrap-table/bootstrap-table.js"></script>
<link href="${ctxPath}/static/js/bootstrap-table/bootstrap-table.css"
	rel="stylesheet" />
<script
	src="${ctxPath}/static/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<link rel="stylesheet"
	href="${ctxPath}/static/js/useful-ztree/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript"
	src="${ctxPath}/static/js/useful-ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/js/useful-ztree/js/jquery.ztree.excheck-3.5.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="${ctxPath}/static/js/bootstrap-select/css/bootstrap-select.min.css">

<script
	src="${ctxPath}/static/js/bootstrap-select/js/bootstrap-select.min.js"></script>
<script
	src="${ctxPath}/static/js/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>


<script type="text/javascript">
	$(function() {
		//1.初始化Table
		var oTable = new TableInit();
		oTable.Init();
		$.post('${ctxPath}/province/queryUnallocatedProvinces', function(data) {
			$(data).each(
					function(index, currData) {
						$("#unallocatedProvinceList").append(
								'<li class="list-group-item">' + currData.name
										+ '</li>');
					});
		});
		$("#btn_query")
				.click(
						function() {
							if (!$("#txt_search_provinceName").val() == "") {

								$
										.post(
												'${ctxPath}/internalWorker/queryInternalWorkerByProvince',
												{
													name : $(
															"#txt_search_provinceName")
															.val()
												},
												function(data) {
													if (data == null
															|| data == "") {
														$("#txt_result_query")
																.val(
																		"这个省份还没有分配");
														return;
													}
													$("#txt_result_query")
															.val(
																	"您分配给了["
																			+ data.workerCode
																			+ "]");
												});
							} else {
								toastr.error("不能输入为空");
							}

						});

	});
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$('#tb_internalWorker')
					.bootstrapTable(
							{
								url : '${ctxPath}/internalWorker/queryByPage', //请求后台的URL（*）
								method : 'post', //请求方式（*）
								toolbar : '#toolbar', //工具按钮用哪个容器
								striped : true, //是否显示行间隔色
								cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
								pagination : true, //是否显示分页（*）
								sortable : false, //是否启用排序
								sortName : 'id',
								sortOrder : "desc", //排序方式
								queryParams : oTableInit.queryParams,//传递参数（*）
								sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
								pageNumber : 1, //初始化加载第一页，默认第一页
								pageSize : 8, //每页的记录行数（*）
								pageList : [ 8, 25, 50, 100 ],
								search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
								strictSearch : false,
								showColumns : false, //是否显示所有的列
								showRefresh : true, //是否显示刷新按钮
								minimumCountColumns : 2, //最少允许的列数
								clickToSelect : false, //是否启用点击选中行
								height : 600, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
								uniqueId : "id", //每一行的唯一标识，一般为主键列
								showToggle : true, //是否显示详细视图和列表视图的切换按钮
								cardView : false, //是否显示详细视图
								detailView : false, //是否显示父子表
								contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
								columns : [
										{
											field : 'workerCode',
											title : '员工标识',
											align : 'center',
											width : '10%'
										},
										{
											field : 'createTime',
											title : '创建日期',
											align : 'center',
											width : '20%'
										},
										{
											field : 'provinces',
											title : '管理省份',
											align : 'left',
											width : '50%',
											formatter : function(value, row,
													index) {
												var returnValue = "";
												$(value)
														.each(
																function(index,
																		currData) {
																	returnValue = returnValue
																			+ " "
																			+ currData.name;
																})
												return returnValue;
											}
										},
										{
											field : 'tag',
											title : '分配省份',
											align : 'center',
											width : '20%',
											formatter : function(value, row,
													index) {
												return "<button class='btn btn-info btn-xs' onclick='allocateProvincesModalOpen("
														+ row.id
														+ ")'>分配省份</button>";
											}
										}, ]
							});
		};

		//得到查询的参数
		oTableInit.queryParams = function(params) {
			var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
				limit : params.limit, //页面大小
				offset : params.offset, //页码
				order : params.order,
				sort : params.sort,
			};
			return temp;
		};
		return oTableInit;
	};
	//提交为员工分配的省份安排
	function allocateProvincesModalSubmit() {
		var provinceIDS = "";
		$($("#allocateProvincesSelect").val()).each(function(index, currData) {
			provinceIDS = provinceIDS + "," + currData;
		})
		$.post('${ctxPath}/province/modifyProvincesByInternalWorker', {
			provinceIDS : provinceIDS.substring(1),
			id : modifyInternalWorkerID
		}, function(data) {
			//$('#allocateProvincesModal').modal('hide');
			window.location.reload();
		});
	}
	//要分配的内部员工的ID
	var modifyInternalWorkerID;
	function allocateProvincesModalOpen(id) {
		modifyInternalWorkerID = id;
		$('#allocateProvincesSelect').empty();
		var allocateRow = $('#tb_internalWorker').bootstrapTable(
				'getRowByUniqueId', id);
		$('#txt_workerCode').val(allocateRow.workerCode);
		$.post('${ctxPath}/province/queryAvailableProvinces', {
			id : allocateRow.id
		}, function(data) {
			$(data.provinces).each(
					function(index, currData) {
						$('#allocateProvincesSelect').append(
								"<option selected='selected' value='"+currData.id+"'>"
										+ currData.name + "</option>");
					});
			$(data.unallocatedProvinces).each(
					function(index, currData) {
						$('#allocateProvincesSelect').append(
								"<option value='"+currData.id+"'>"
										+ currData.name + "</option>");
					});
			$('#allocateProvincesSelect').selectpicker('refresh');

		});
		$('#allocateProvincesModal').modal('show');
	}
</script>
</html>
